<template>
  <div id="App">
    <tao-table :persons="persons">
      <template v-slot:default="{item}">
        <button type="button" class="layui-btn layui-btn-danger" @click="remove(item)">删除</button>
      </template>
    </tao-table>

    <tao-table :persons="persons">
      <template #default="{item}">
        <button type="button" class="layui-btn layui-btn-danger" @click="show(item)">查看</button>
      </template>
    </tao-table>
  </div>
</template>
<script>
import TaoTable from "@/components/tao-table.vue";

export default {
  name: "App",
  components: {TaoTable},
  data() {
    return {
      persons: [
        {id: 1, name: "马云", age: 56, address: "杭州"},
        {id: 2, name: "马化腾", age: 49, address: "深圳"},
        {id: 3, name: "马保国", age: 50, address: "快手"},
        {id: 4, name: "马斯克", age: 48, address: "美国"},
      ]
    }
  },
  methods: {
    remove({id}) {
      this.persons = this.persons.filter(item => item.id !== id)
    },
    show(item) {
      alert(item.name)
    }
  }

}
</script>
<style lang="less">

</style>
